﻿<div class="modal fade" id="fileupload" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="ModalLabel">Excel上传导入</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body p-0">
        <input type="file" multiple="multiple" name="uploadfiles" id="uploadfiles">
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  let uploadmodel = null;
  //打开Excel上传窗口
  function importexcel(model) {
    uploadmodel = model;
    $('#fileupload').modal('toggle');
  }
  
  document.addEventListener("DOMContentLoaded", function () {

    // enable fileuploader plugin
    $('input[name="uploadfiles"]').fileuploader({
      limit: 1,
      maxSize: 20,
      fileMaxSize: 20,
      captions: {
        feedback: 'Drag and drop files here',
        feedback2: 'Drag and drop files here',
        drop: 'Drag and drop files here',
        or: 'or',
        button: 'Browse files'
      },
      changeInput: '<div class="fileuploader-input">' +
        '<div class="fileuploader-input-inner">' +
        '<div class="fileuploader-main-icon"></div>' +
        '<h3 class="fileuploader-input-caption"><span>Drag and drop files here</span></h3>' +
        '<p>or</p>' +
        '<div class="fileuploader-input-button js-waves-on"><span>Browse files</span></div>' +
        '</div>' +
        '</div>',
      theme: 'dragdrop',
      extensions: ['xlsx', 'xls', 'csv', 'text/plain'],
      upload: {
        url: "/FileUpload/Upload",
        data: { model: uploadmodel },
        type: 'POST',
        enctype: 'multipart/form-data',
        start: true,
        synchron: false,
        beforeSend: function (item) {
          item.upload.data.model = uploadmodel;
          item.upload.data.ver = '2.0';
          item.upload.data.data_attribute = 'nice';
        },
        onSuccess: function (result, item) {
          // if success
          if (result.success && result.filename) {
            //item.name = result.filename;
            item.html.find('.column-title > div:first-child').text(item.name).attr('title', result.filename);
            $.messager.alert('导入完成', '导入完成！<br> 耗时：' + result.elapsedTime, 'info');
            reload();
            $('#fileupload').modal('toggle');
          } else {
            item.html.find('.column-title > div:first-child').text(item.name).attr('title', result.filename);
            item.html.removeClass('upload-successful').addClass('upload-failed');
            // go out from success function by calling onError function
            // in this case we have a animation there
            // you can also response in PHP with 404
            //alert(result.message);
            $.messager.alert('导入失败', result.message, 'error');
            return this.onError ? this.onError(item) : null;

          }



          item.html.find('.fileuploader-action-remove').addClass('fileuploader-action-success');
          setTimeout(function () {
            item.html.find('.progress-bar2').fadeOut(400);
          }, 400);
        },
        onError: function (item) {
          var progressBar = item.html.find('.progress-bar2');

          if (progressBar.length) {
            progressBar.find('span').html(0 + "%");
            progressBar.find('.fileuploader-progressbar .bar').width(0 + "%");
            item.html.find('.progress-bar2').fadeOut(400);
          }

          item.upload.status != 'cancelled' && item.html.find('.fileuploader-action-retry').length == 0 ? item.html.find('.column-actions').prepend(
            '<a class="fileuploader-action fileuploader-action-retry" title="Retry"><i></i></a>'
          ) : null;
        },
        onProgress: function (data, item) {
          var progressBar = item.html.find('.progress-bar2');

          if (progressBar.length > 0) {
            progressBar.show();
            progressBar.find('span').html(data.percentage + "%");
            progressBar.find('.fileuploader-progressbar .bar').width(data.percentage + "%");
          }
        },
        onComplete: null
      },
      onRemove: function (item) {

        var filename = item.html.find('.column-title > div:first-child').attr('title');
        $.post('/FileUpload/Remove', { filename: filename });

      },
      thumbnails: {
        canvasImage: false,
        popup: null
      }
    });

  });

</script>
